<template>
  <div id="page-index">
    <div class="container">
      <div class="title">
      </div>
      <div class="section">
        <div class="section-title">
          <img src="/mother/static/img/index_thanks.png" alt="" class="section-thanks">
          <div class="main-div">
            <img src="/mother/static/img/index_love.png" alt="" class="section-love">
            <img src="/mother/static/img/index_main.png" alt="" class="section-main">
          </div>
        </div>
        <div class="section-bottom">
           <div class="section-my">
            <span @click="tomyurl">我的贺卡</span>
          </div>
          <div class="section-do">
            <span @click="tomakeurl">制作贺卡</span>
          </div>
        </div>
      </div>
      <div class="foot">
        <span>技术支持：网道科技</span>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    tomakeurl(){
      this.$router.push('/make')
    },
    tomyurl(){
      this.$router.push('/my')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
img{font-size: 0px}
.container{
  width:100vw;
  background:#cc0000;
  height: 100vh;
}
.title{
  padding-top:2.5%
}
.title-logo{
  width: 20%;
  margin-left:4.5%
}
.title-code{
  width: 10%;
  margin-left:2.5%
}
.title-gz{
   width: 2.3%
}
.section{
  position: relative;
  box-sizing: border-box;
  padding: 0 15%;
  margin-top:6%;
}
.main-div{
  position: relative;
  width: 100%;
  top: 1.5rem;
}
.section-thanks{
  width: 90%;
  margin: 2% 5%;

}
.section-love{
  position: absolute;
  top: 0;
  left:0;
  width:40%
}
.section-main{
  width: 90%;
  height:50vh
}
.section-do{
  background: url('/mother/static/img/index_button.png') no-repeat center;
  background-size:cover;
  color:#333;
  font-size: 18px;
  text-align: center;
  width: 40%;
  padding: 5px;
  margin: 0 5% 0;
  position: relative;
  display: inline-block
}
.section-bottom{
  width: 100%;
  margin-top: 4rem;
}
.section-my{
  background: url('/mother/static/img/index_button.png') no-repeat center;
  background-size:cover;
  color:#333;
  font-size: 18px;
  text-align: center;
  width: 40%;
  padding: 5px;
  margin: 0;
  position: relative;
  display: inline-block;
  float:right;
}
.section-do span,.section-my span{
  position: relative;
  display: block;
  top:-2px;
  
}
.foot{
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  padding: 10px 0;
  font-size: .8rem;
  color: #fff
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
